<template>
	<div>
		<div :style="setStateStyle(state)" class="machine-state-icon"></div>
	</div>
</template>

<script>
    import colorMixin from '../../../orderTracking/colors-mixin';

    export default {
        mixins: [colorMixin],
        props: {
            state: {
                type: Number,
                default: null
            }
        },
        methods: {
            setStateStyle(state) {
                return {
                    background: this.stateList[state] ? this.stateList[state].color : '#808695',
                    boxShadow: `0 0 4px 1px ${this.stateList[state] ? this.stateList[state].color : '#808695'}`
                };
            }
        }
    };
</script>

<style scoped lang="scss">
    .machine-state-icon {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        animation: machineStateAni 2s infinite;
        margin-right: 4px;
    }
    @keyframes machineStateAni {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
        100% {
            opacity: 1;
        }
    }
</style>
